<template>
  <a-modal
    v-model="showModal"
    width="860px"
    :title="id !== '' ? '修改取消政策规则' : '新建取消政策规则'"
    ok-text="确认"
    :confirm-loading="loading"
    @cancel="cancelBtn"
    @ok="submit"
  >
    <a-form style="width: 85%" :form="form" class="inline-form">
      <a-form-item class="flex items-center" style="width: 50%" label="是否是特殊时间：">
        <a-radio-group
          @change="radiochange"
          class="flex"
          placeholder="请选择是否是特殊时间"
          v-decorator="['isSpecialTime', { rules: [{ required: true, message: '请选择是否是特殊时间' }] }]"
        >
          <a-radio :value="true"> 特殊时间 </a-radio>
          <a-radio :value="false"> 日常时间 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="特殊时间名称：" v-if="specialTime">
        <a-input
          class="w-full"
          placeholder="请输入特殊时间名称"
          v-decorator="['specialTimeName', { rules: [{ required: true, message: '请输入特殊时间名称' }] }]"
        />
      </a-form-item>
      <a-form-item label="特殊时间区间：" v-if="specialTime">
        <a-range-picker
          v-model="specialTimeNameArr"
          class="w-full"
          placeholder="请选择特殊时间区间"
          v-decorator="['specialTimeNameArr', { rules: [{ required: true, message: '请输入特殊时间名称' }] }]"
        />
      </a-form-item>
      <a-form-item class="mb-15" label="取消用车费用收取方式" :label-col="labelCol" :wrapper-col="wrapperCol">
        <!-- <a-select
          labelInValue
          placeholder="请选择取消用车费用收取方式"
          v-decorator="['cancelFeeType', { rules: [{ required: true, message: '请输入取消说明' }] }]"
        >
          <a-select-option v-for="(item, index) in cancelTypeList" :value="item.value" :key="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select> -->
        <a-select
          class="w-full"
          placeholder="请选择取消用车费用收取方式"
          v-decorator="['cancelFeeType', { rules: [{ required: true, message: '请选择取消用车费用收取方式' }] }]"
        >
          <a-select-option v-for="item in cancelTypeList" :value="item.value" :key="item.value">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <div class="flex">
        <section style="width: 17%" class="mt-8 ml-2"><span style="color: red" class="mr-4">*</span>取消规则：</section>
        <a-form-item style="align-items: flex-start">
          <section>
            <section v-for="(item, index) in rulesCards" :key="index" class="flex">
              <!-- <span style="width: 16%"><span style="color: red" class="mr-4">*</span>取消规则：</span> -->
              <!-- <div v-if="id == ''">
                <span>在预计取车时间前</span>
                <a-input-number
                  class="w2 ml-2 mr-2"
                  maxLength="2"
                  placeholder="请输入取车时间前"
                  v-model="item.hours"
                />
                <span>小时内,收取预定金额的</span>
                <a-input-number
                  class="w2 ml-2 mr-2"
                  maxLength="2"
                  :min="0"
                  placeholder="请输入收取的取消费用"
                  v-model="item.fee"
                  onkeyup="value=value.replace(/[^\d]/g,'') "
                />
                <span>%为取消费用;</span>
              </div> -->
              <!-- <div class="flex"> -->
              <!-- <section class="text-14 w-auto" v-show="item.hours < 0">
                  取车时间之后取消，需支付预定金额的{{ item.fee }}%为取消费用
                </section> -->
              <section v-show="item.hours >= 0">
                <span>在预计取车时间</span>
                <a-input-number class="mr-2" maxLength="2" placeholder="请输入取车时间前" v-model="item.hours" />
                <span>小时前,收取预定金额的</span>
              </section>
              <span v-show="item.hours <0">取车时间之后取消,需支付预定金额的</span>
              <a-input-number
                class="mr-2"
                maxLength="2"
                :min="0"
                placeholder="请输入收取的取消费用"
                v-model="item.fee"
                onkeyup="value=value.replace(/[^\d]/g,'') "
              />
              <span>%为取消费用;</span>
              <!-- </div> -->

              <a-popconfirm title="确定要删除吗？" ok-text="是" cancel-text="否" @confirm="rulesCardsconfirm(index)">
                <span class="text-red-700 action ml-5">
                  <a-icon type="minus-square" />
                </span>
              </a-popconfirm>
            </section>
            <a-button class="block mt-8" style="width: 100%" @click="addrulesCards">添加规则</a-button>
          </section>
        </a-form-item>
      </div>

      <a-form-item label="取消说明：">
        <a-textarea
          class="w-full"
          placeholder="请输入取消说明"
          :min="1"
          :precision="0"
          :rows="4"
          v-decorator="['cancelTips', { rules: [{ required: true, message: '请输入取消说明' }] }]"
          maxLength="300"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addRule, updateRule, rule } from '@/api/cancel-policy'

export default {
  components: {},
  props: {
    cancelStrategyId: {
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      title: '新建政策',
      showModal: false,
      specialTimeNameArr: [undefined, undefined],
      rulesCards: [
        {
          hours: 0,
          fee: undefined,
        },
        {
          hours: -1,
          fee: undefined,
        },
      ],
      specialTime: true,
      form: this.$form.createForm(this),
      id: '',
      cancelTypeList: [],
      info: null,
      cancelRulesData: [],
    }
  },
  computed: {},
  watch: {
    showModal() {
      this.form.resetFields()
    },
  },
  created() {
    this.$utils.getDictList('CancelType').then((res) => {
      this.cancelTypeList = res
    })
  },
  mounted() {},
  destroyed() {},
  methods: {
    open(id, data) {
      this.id = id
      this.showModal = true
      this.$nextTick(() => {
        if (id !== '') {
          if (!data.isSpecialTime) {
            this.specialTime = false
          }else{
            this.specialTime = true
          }
          this.rulesCards = data.cancelRules
          this.specialTimeNameArr[0] = data.startTime
          this.specialTimeNameArr[1] = data.endTime
          this.$nextTick(() => {
            this.form.setFieldsValue({
              ...data,
              specialTimeName: data.specialTimeName,
              cancelFeeType: data.cancelFeeType,
              specialTimeNameArr: this.specialTimeNameArr,
            })
          })
        }
      })
    },
    // cancellationCharge(value) {
    //   console.log(value)
    //   //   this.cancellationValue = value && value.label.indexOf('百分比') !== -1
    //   this.cancellationValue = value
    // },
    addrulesCards() {
      if (this.rulesCards.length >= 5) {
        this.$confirm({
          title: '提示',
          content: '取消规则不能多于五条！',
          okText: '确定',
          okType: 'danger',
          // cancelText: '取消',
        })
      } else {
        this.rulesCards.push({
          hours: 0,
          fee: undefined,
        })
		  this.rulesCards.sort((a, b) => {
		    if (a.hours >= 0 && b.hours < 0) {
		        return -1; // 正数排在负数前面
		    } else if (a.hours < 0 && b.hours >= 0) {
		        return 1; // 负数排在正数后面
		    } else {
		        return 0; // 保持原有顺序不变
		    }
		});
		
		
		
		 console.log( this.rulesCards,'222')
      }
    },
    rulesCardsconfirm(index) {
      if (this.rulesCards.length <= 2) {
        this.$confirm({
          title: '提示',
          content: '取消规则不能少于两条！',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
        })
      } else this.rulesCards.splice(index, 1)
      //   this.rulesCards.splice(index, 1)
    },
    radiochange(e) {
      if (e.target.value) {
        this.specialTime = true
      } else {
        this.specialTime = false
      }
    },
    submit() {
      this.form.validateFields(async (err, values) => {
        if (values.isSpecialTime == false) {
          values.specialTimeName = ''
        }
        if (!err) {
          const { id } = this
          if (!this.rulesCards || !this.rulesCards.length) return this.$message.warning('请添加取消规则')
          let { specialTimeNameArr, ...params } = values
          const info = {
            ...params,
            cancelStrategyId: this.cancelStrategyId,
            startTime: this.$utils.getStartTime(this.specialTimeNameArr[0]),
            endTime: this.$utils.getEndTime(this.specialTimeNameArr[1]),
            rules: this.rulesCards,
            // cancelFeeType: this.cancellationValue.key,
          }
          this.loading = true
          const fun = id == '' ? addRule : updateRule
          fun({
            ...info,
            id,
          })
            .then((res) => {
              this.$message.success(id ? '编辑成功！' : '新建成功！')
              //   this.search()
              //   this.cancel()
              this.$emit('success')
              this.form.resetFields()
              this.rulesCards = [
                {
                  hours: '',
                  fee: '',
                },
                {
                  hours: '',
                  fee: '',
                },
              ]
              this.showModal = false
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    cancelBtn() {
      this.form.resetFields()
      this.rulesCards = [
        {
          hours: '',
          fee: '',
        },
        {
          hours: '',
          fee: '',
        },
      ]
    },
  },
}
</script>
<style scoped lang='less'>
.w5 {
  width: 100%;
}
.w2 {
  width: 18%;
}
</style>
